<template>
  <el-drawer
    v-model="dialogVisible"
    :title="dialogStatus==='create'?'新增': (dialogStatus === 'view' ? '查看' : '编辑')"
    width="600px"
    @close="reset"
  >
    <el-form 
      ref="articleFormRef"
      :model="tableItem" 
      :rules="rules"
      label-width="100"
      label-position="top"
      :disabled="!isDisabled"
    >

      <el-form-item label="项目" prop="projectId">
        <el-select v-model="tableItem.projectId" placeholder="选择一个项目" @change="handleChangeProject">
          <el-option 
            v-for="item in projectList"
            :label="item.projectName" 
            :value="item.id" 
          />
        </el-select>
      </el-form-item>

      <el-form-item label="房间号" prop="houseNum">
        <!-- <el-select v-model="tableItem.houseNum" placeholder="选择一个房间">
          <el-option 
            v-for="item of homeNumList"
            :label="item.houseNum" 
            :value="item.id" 
          />
        </el-select> -->
        <el-input placeholder="输入一个房间号" v-model="tableItem.houseNum"/>
      </el-form-item>

      <el-form-item label="电表" prop="emEquipId">
        <el-select v-model="tableItem.emEquipId" placeholder="选择一个电表" clearable>
          <el-option 
            v-for="item in filterEquipListElec"
            :label="item.equipName" 
            :value="item.id" 
          />
        </el-select>
      </el-form-item>

      <el-form-item label="水表" prop="wmEquipId">
        <el-select v-model="tableItem.wmEquipId" placeholder="选择一个水表" clearable>
          <el-option 
            v-for="item in filterEquipListWater"
            :label="item.equipName" 
            :value="item.id" 
          />
        </el-select>
      </el-form-item>

      <el-form-item label="气表" prop="gmEquipId">
        <el-select v-model="tableItem.gmEquipId" placeholder="选择一个气表" clearable>
          <el-option 
            v-for="item in filterEquipListGas"
            :label="item.equipName" 
            :value="item.id" 
          />
        </el-select>
      </el-form-item>

      <el-form-item label="智慧用电监控终端" prop="ipmtEquipId">
        <el-select v-model="tableItem.ipmtEquipId" placeholder="选择一个智慧用电监控终端" clearable>
          <el-option 
            v-for="item in filterEquipListIpmt"
            :label="item.equipName" 
            :value="item.id" 
          />
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="tableItem.remark" />
      </el-form-item>

    </el-form>
    <template #footer v-if="isDisabled">
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus==='create'?createData():updateData()"
        >确 定</el-button>
      </span>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, inject, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { addHouse, editHouse, getHouseIdList, homeNumList, getEquipmentList } from '@/api/settle'
import { validate } from '@/utils/validate'

const projectList = inject('projectList')
console.log('projectList', projectList)

const isDisabled = ref(true)

const tableItem = reactive({
  projectId: null,
  houseNum: null,
  emEquipId: null,
  wmEquipId: null,
  gmEquipId: null,
  remark: '',
})

//房间id
const houseId=ref('')

const filterEquipListElec = ref([])

const filterEquipListWater = ref([])

const filterEquipListGas = ref([])

const filterEquipListIpmt = ref([])

const rules = reactive({
  projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
  houseNum: [{ required: true, message: '请输入房间号', trigger: 'blur' }],
})

const dialogVisible = ref(false)
const dialogStatus = ref('create')

const reset = () => {
  if (!articleFormRef) return
  articleFormRef.value.resetFields()
  filterEquipListElec.value = []
  filterEquipListWater.value = []
  filterEquipListGas.value = []
  filterEquipListIpmt.value = []
  // isDisabled.value = false
}


const articleFormRef = ref(null)

const emit = defineEmits(['listChange'])

const createData = async () => {
  const valid = await validate(articleFormRef)
  if (valid) {
    addHouse(tableItem)
    .then(() => {
      // TODO use res data
      emit('listChange')
      dialogVisible.value = false
      ElMessage.success('创建成功！')
    })
    .catch(() => {
      dialogVisible.value = false
      ElMessage.error('创建失败！')
    })
  }
}

const handleChangeProject = (val) => {
  tableItem.emEquipId=null
  tableItem.wmEquipId=null
  tableItem.gmEquipId=null
  getEquipmentListFn(val,houseId.value)
}

const getEquipmentListFn=(val,val1)=>{
  getEquipmentList({projectId:val,houseId:val1})
    .then(res => {
      filterEquipListElec.value = res.data.electricEquips
      filterEquipListWater.value = res.data.waterEquips
      filterEquipListGas.value = res.data.gasEquips
      filterEquipListIpmt.value = res.data.ectEquips
    })

    .catch(() => {
      filterEquipListElec.value.length = 0
      filterEquipListWater.value.length = 0
      filterEquipListGas.value.length = 0
      filterEquipListIpmt.value.length = 0
    })


}

const updateData = async () => {
  const valid = await validate(articleFormRef)
  if (valid) {
    editHouse(tableItem)
    .then(() => {
      // TODO use res data
      emit('listChange')
      dialogVisible.value = false
      ElMessage.success('更新成功！')
    })
    .catch(() => {
      dialogVisible.value = false
      ElMessage.error('更新失败！')
    })
  }
}

defineExpose({ dialogVisible, isDisabled, tableItem, dialogStatus, reset,getEquipmentListFn,houseId })

// // 房间号相关
// const homeNumList = ref<homeNumList>([])
// const getHomeNumList = async (v: number) => { 
//   const res = await getHouseIdList(v)
//   homeNumList.value = res.data
// }
// watch(() => (tableItem.projectId as unknown as number), getHomeNumList)
</script>
<style lang="scss" scoped>
</style>
